<template>
	<view>
		<!-- 角标 -->
		<uni-badge :text="msgNum" type="success" size="normal" max-num="30" absolute="right">
			<view class="message" @click="msgNum++">我的消息</view>
		</uni-badge>

		<!-- 日历 -->
		<view>
			<uni-calendar ref="calendar" :insert="false" @confirm="confirm" :lunar='true' :startDate="startDate"
				:endDate="endDate" />
			<button @click="open">打开日历</button>
		</view>

		<!-- 倒计时 -->
		<view class="countdown">
			<!-- 一般用法 -->
			<uni-countdown backgroundColor="#fc830a" color="#fff" splitorColor="#fc830a" :day="0" :hour="0" :minute="0"
				:second="5" @timeup="timeup"></uni-countdown>
		</view>

		<!-- 购物车 -->
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			msgNum: 0,
			// 当前日期
			startDate: '',
			endDate: '',

			// 购物车
			options: [{
				icon: 'chat',
				text: '客服'
			}, {
				icon: 'shop',
				text: '店铺',
				info: 2,
				infoBackgroundColor: '#007aff',
				infoColor: "#f5f5f5"
			}, {
				icon: 'cart',
				text: '购物车',
				info: 2
			}],
			buttonGroup: [{
				text: '活动暂未开始',
				// 背景深灰色
				backgroundColor: '#f5f5f5',
				color: '#999'
			}],
			// 按钮状态
			status: 0,
			// 秒杀速度训练时间：毫秒
			time: 500
		}
	},
	mounted() {
		// 获取当前系统时间作为开始时间
		this.startDate = new Date().toISOString().split('T')[0];
		// 获取后5天作为结束时间
		const endDateObj = new Date();
		endDateObj.setDate(endDateObj.getDate() + 4);
		this.endDate = endDateObj.toISOString().split('T')[0];
	},
	methods: {
		open() {
			this.$refs.calendar.open();
		},
		confirm(e) {
			console.log(e);
		},
		//倒计时结束前提示活动暂未开始且显示灰色，倒计时结束后提示立即购买
		timeup() {
			this.status = 1;
			this.buttonGroup = [{
				text: '立即购买',
				backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
				color: '#fff'
			}]
			setTimeout(() => {
				this.status = 3;
				this.buttonGroup = [{
					text: '被抢完了',
					backgroundColor: '#e5e5e5',
					color: '#999'
				}]
			}, this.time);
		},
		buttonClick(e) {
			if (this.status == 0) {
				//弹框提示活动暂未开始
				uni.showToast({
					title: '活动暂未开始',
					icon: 'none'
				})
			} else if (this.status == 1) {
				//弹出一个确认框
				uni.showModal({
					title: '系统提示',
					content: '你的手速记录是' + this.time + "毫秒",
					success: (res) => { }
				})
			} else if (this.status == 3) {
				uni.showToast({
					title: '被抢完了请下次再来',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style>
.message {
	width: 150px;
	height: 30px;
	background-color: aquamarine;
	text-align: center;
	line-height: 30px;
	margin: 0 auto;
	border-radius: 20px;
}

.countdown {
	width: 150px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	/* 淡淡的阴影 */
	margin: 0 auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.goods-carts {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	position: fixed;
	left: 0;
	right: 0;
	/* #ifdef H5 */
	left: var(--window-left);
	right: var(--window-right);
	/* #endif */
	bottom: 0;
}
</style>